<!DOCTYPE html>
<html>
<head>
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      position: absolute;
      cursor: move;
    }
  </style>
</head>
<body>

<div id="draggable"></div>

<script>
  var draggable = document.getElementById('draggable');
  var isDragging = false;
  var offsetX, offsetY;

  draggable.addEventListener('mousedown', function(e) {
    isDragging = true;
    offsetX = e.clientX - draggable.offsetLeft;
    offsetY = e.clientY - draggable.offsetTop;
  });

  document.addEventListener('mousemove', function(e) {
    if (isDragging) {
      draggable.style.left = e.clientX - offsetX + 'px';
      draggable.style.top = e.clientY - offsetY + 'px';
    }
  });

  document.addEventListener('mouseup', function() {
    isDragging = false;
  });
</script>

</body>
</html>
